<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入vue.min.js-->
    <script src="vue.min.js"></script>
    <!--引入路由vue-router.min.js-->
    <script src="vue-router.min.js"></script>
</head>
<body>
    <!--定义表示范围 id可以随意指定-->
    <div id="app">
        <p>
            <!-- 使用 router-link 组件来导航,通过传入 'to' 属性指定链接 -->
            <!-- <router-link> 默认会被渲染成一个 '<a>' 标签 -->
            <router-link to="/">首页</router-link>
            <router-link to="/book">书籍管理</router-link>
            <router-link to="/chapter">章节管理</router-link>
        </p>
        <p>
             路由出口,路由匹配到的组件将渲染在这里
            <router-view></router-view>
        </p>


    </div>
</body>
<script>
    // ##1.定义(路由)组件
    // ##也可以从其它文件 import 进来
    const Welcome = { template: '<div>欢迎</div>'}
    const Book = { template: '<div>Book list</div>'}
    const Chapter = { template: '<div>Chapter list</div>'}

    // ##2.绑定路由和组件
    const routes=[//path输入路径,component写组件,redirect进行重定向
        { path:'/',redirect:'/Welcome'},
        { path:'/Welcome',component:Welcome},
        { path:'/book',component:Book},
        { path:'/chapter',component:Chapter}
    ]

    // ##3.创建路由
    const router =new VueRouter({
        routes//缩写形式 ##相当于routes:routes
    })

    //##创建 vue实例
    new Vue({
        el:'#app',//##绑定标识范围
        router//进入vue渲染
    })
</script>
</html>